<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>table</title>
</head>
<style type="text/css">

   table{
   	border-collapse: collapse;
   	width:600px;
   	text-align: center;

}
.odd{
	background: #fff;
}
.even{
	background: #ccc;
}
tbody tr:hover{
	background-color:#039;
	color:#fff;
}/*把鼠标放到行去会有颜色悬浮*/

</style>
<body>
	<table border="1">
	    <thead>
		<tr><th colspan="5">采购清单</th></tr>
        <tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>操作</th>
		</tr>
       </thead>

		<tbody>
			<tr>
				<td>1</td>
				<td>小龙虾</td>
				<td>38</td>
				<td>5</td>
				<td><button onclick="delRow(this)">删除</button></td>
			</tr>

			<tr>
				<td>2</td>
				<td>螃蟹</td>
				<td>48</td>
				<td>2</td>
				<td><button onclick="delRow(this)">删除</button></td>
			</tr>

			<tr>
				<td>3</td>
				<td>蛋糕</td>
				<td>60</td>
				<td>1</td>
				<td><button onclick="delRow(this)">删除</button></td>
			</tr>

			<tr>
				<td>4</td>
				<td>螺蛳粉</td>
				<td>12</td>
				<td>1</td>
				<td><button onclick="delRow(this)">删除</button></td>
			</tr>

			<tr>
				<td>5</td>
				<td>安慕希</td>
				<td>6</td>
				<td>1</td>
				<td><button onclick="delRow(this)">删除</button></td>
			</tr>

			<tr>
			<td colspan="5">
				<p>
					合计
				</p>
			</td>
		</tr>


		

			
		</tbody>
	</table>

<script type="text/javascript" src="statics/js/jquery.js"></script>

<script type="text/javascript">

//与上面odd even的样式有关，把奇数行或者偶数行的变背景色，
// $("tbody tr:odd").addClass("even");

/*
eq(0)  等于
gt(0)  greater than 大于
lt(0) lower than  小于

 */
// $("tbody tr:gt(0):lt(4)").css("background-color","green");
//tbody里面大于0小于4的行背景颜色为绿色 0<x<4;


// $("tbody tr:eq(2)").css("background-color","blue");//在tbody里面等于2的行背景颜色变为蓝色

function delRow(abt){
    $(abt).parent().parent().remove();//点击删除的时候，它就能实现删除。移除tbody里面的tr里面的td所以排序是它的祖父到它的父亲再到移除的对象，this是这里的关键词，abt是形式参数，this是实际参数。（个人理解）
}
	


</script>
</body>
</html>